<template>
  <div>
    <div class="home">
      <div class="head ">
        <div class="logo fll"></div>
        <div class="logoName fll ">Exam Cloud Pro</div>
        <div class="signup flr"><button @click="login">注册</button></div>
        <div class="login flr"><button @click="login">登录</button></div>
      </div>
      <div class="text"><p>Connecting unique voices to unique brands.</p></div>
      <div class="getit"><a @click="toHome">Free To Get It!</a></div>
      <!-- <div class="banner"></div> -->
    </div>
    <div class="wave"></div>
    <div style="height:1000px;width: 100%;text-align:center">
      <div class="introduce"><p>Introduce</p></div>
    </div>
  </div>
</template>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
  integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
  crossorigin="anonymous"
></script>
<script>
export default {
  methods: {
    login() {
      this.$router.push({
        path: `/Login`
      });
    },
    toHome() {
      this.$router.push({
        path: `/home`
      });
    }
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.fll {
  float: left;
}
.flr {
  float: right;
}
.home {
  width: 100%;
  height: 700px;
  background-color: #2341f9;
  position: relative;
}
.home .head {
  z-index: 2;
  position: absolute;
  top: 0;
  width: 100%;
}
.home .head .logo {
  margin-left: 120px;
  margin-top: 30px;
  width: 64px;
  height: 64px;
  background-image: url("../assets/logo.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
.home .head .logoName {
  margin-left: 20px;
  margin-top: 35px;
  font-size: 32px;
  color: #fff;
}
.home .head .login {
  margin-top: 35px;
  margin-right: 20px;
}
.home .head .login button {
  color: #fff;
  font-size: 22px;
  background: transparent;
  border: 2px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}
.home .head .signup {
  margin-top: 35px;
  margin-right: 170px;
}
.home .head .signup button {
  color: #fff;
  font-size: 22px;
  background: transparent;
  border: none;
  /* border-radius: 10px; */
  cursor: pointer;
  padding-left: 10px;
  padding-right: 10px;
}
.home .text {
  position: absolute;
  top: 0;
  width: 650px;
  margin-left: 120px;
  margin-top: 180px;
}
.home .text p {
  font-size: 64px;
  color: #fff;
}
.home .getit {
  position: absolute;
  top: 0;
  width: 650px;
  margin-left: 200px;
  margin-top: 520px;
}
.home .getit a {
  font-size: 32px;
  color: #fff;
  border: 2px solid #fff;
  padding: 0px 10px 0px 10px;
  border-radius: 10px;
}
.home .getit a:hover {
  text-decoration: none;
}
.banner {
  position: absolute;
  top: 0;
  right: 0;
  width: 1200px;
  height: 800px;
  background-image: url("../assets/web.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
.wave {
  margin-top: -1px;
  height: 140px;
  background-image: url("../assets/wave.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -moz-background-size: 100% 100%;
}
.introduce {
  margin-top: 60px;
}
.introduce p {
  font-size: 48px;
}
</style>
